<html>
	<head>
		<link rel="stylesheet" href="../../../themes/themeroller/maemo5-theme/ui.all.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="../../../themes/nokia/ext-theme/maemo5/800x480/custom.css" type="text/css" media="screen" />

		<script src="../../../lib/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="../../../src/defaults.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../src/core.js" type="text/javascript" charset="utf-8"></script>
		
		<style type="text/css" media="screen">

			body {
				font-size: 24px;
				color: white;
				font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
			}
			
			a {
				text-decoration: none;
				color: white;
				font-size: 24px;
			}
			
			a.header {
				display: block;
				padding: 4px;
				margin: 4px;
				text-align: center;
			}
			
			a:hover {
				opacity: .75;
			}
			
			h3 {
				font-size: 18px;
				color: #CCCCCC;
				margin-top: 5px;
			}
			
			p {
				font-size: 22px;
			}
			
			.shadow {
				background: transparent url(images/shadow.png);
				-moz-border-radius: 2px;
				-webkit-border-radius: 2px;
			}
			
			.block {
				display: block;
				margin: 4px;
				padding: 10px;
				text-align: right;
			}
			
			.block img {
				float: right;
				margin-left: 15px;
				height: 74px;
			}

		</style>
		
	</head>

	<body>

		<script type="text/javascript" charset="utf-8">
		
			if (window.widget) {
				widget.setNavigationEnabled(false);
			}
			
			if (window.menu) {
				menu.hideSoftkeys();
			}

			var init = function() {
				
				var FirstView = Nokia.View.extend({
					/*
					* Lifecycle
					*/
					init: function() {
						//
					},
				
					renderUI: function() {
						var instance = this,
							container = instance.getContainer();
							
						instance.chatHeader = Nokia.dom.parseHTML('<a href="javascript:void(0);" class="header shadow">All Friends</a>')
						
						Nokia.dom.append(container, instance.chatHeader);
						
						instance.chatBody = Nokia.dom.parseHTML('<div></div>');
						
						Nokia.dom.append(container, instance.chatBody);
						
						for (var i = 0; i < 3; i++) {
							Nokia.dom.append(instance.chatBody, instance.createChatEntry());
						}
					},
				
					bindUI: function() {
						var instance = this;
						
						instance.chatHeader.toggle(
							function() {
								instance.chatBody.slideUp();
							},
							function() {
								instance.chatBody.slideDown();
							}
						);
					},
					
					syncUI: function() {
						var instance = this;
						
					},
					
					createChatEntry: function() {
						var instance = this,
							chatEntry = Nokia.dom.parseHTML('<a href="javascript:void(0);" class="shadow block ui-helper-clearfix"></a>');
							
						var image = Nokia.dom.parseHTML(
							'<img src="images/image.jpg" />'
						);
						
						Nokia.dom.append(chatEntry, image);
						
						var text = Nokia.dom.parseHTML(
							'<p>Concordo com o @quezado q Percy Jackson &eacute; como jogar no modo EASY e bote EASY nisso. Ow semideus q faz coisas c facilidade sem gra&ccedil;a =/</p>'
						);
						
						Nokia.dom.append(chatEntry, text);
						
						var date = Nokia.dom.parseHTML(
							'<h3>awdren, [+] Thu 18 Mar 08:54 via Echoton</h3>'
						);
						
						Nokia.dom.append(chatEntry, date);
						
						return chatEntry;
					},
					
					show: function() {
						var instance = this,
							container = instance.getContainer();
						
						container.show();
					}
				});
				
				var SecondView = Nokia.View.extend({
					/*
					* Lifecycle
					*/
					init: function() {
						//console.log("initialize FirstView view");
					},
				
					renderUI: function() {
						this._viewHeader = Nokia.dom.parseHTML('<p class="nokia-view-header">Second View Header Second View Header' +
						'Second View Header Second View Header Second View Header Second View Header Second View Header Second View Header' +
						'</p>');
						
						Nokia.dom.append(this.getContainer(), this._viewHeader);
					},
				
					bindUI: function() {
						
						this._viewHeader.click(function() {
							//console.log('Clicked on Header');
						});
						
					},
					
					syncUI: function() {
						this._viewHeader.css('color', 'blue');
					},
					
					show: function() {
						var template = this.getTemplate();
						
						this.getContainer().show();
					}
				});
				
				var viewManager = new Nokia.ViewManager({
					show: function(view) {
						//console.log(view);
					}
				});
				
				viewManager.add(new FirstView());
				viewManager.add(new SecondView());
			
				var templateMaemo = new Nokia.TemplateMaemo({
					viewManager: viewManager,
					menu: {
						items: [
							{
								icon: 'images/icon1.png',
								select: function(item, event) {
									alert('Click!');
								}
							},
							{
								icon: 'images/icon2.png',
								select: function(item, event) {
									alert('Click!');
								}
							},
							{
								icon: 'images/icon3.png',
								select: function(item, event) {
									alert('Click!');
								}
							},
							{
								icon: 'images/icon4.png',
								select: function(item, event) {
									alert('Click!');
								}
							}
						]
					}
				});
				
				/*
				 * Hide splash when its all done.
				*/
				
				Nokia.hideSplash();
			};
			
			/*
			 * Show splash while loading components.
			*/
				
			Nokia.showSplash('<span>LOADING</span>');
			
			Nokia.use('template-maemo', init);

		</script>

	</body>
</html>